$(window).load(function(){
    $('body').append("<div class='keyboard_box' style='display:none;'></div>");

    $('#keyboard').on('click',function(){
        $('.keyboard_box').css('display','block');
    });

    $('#keyboard_city').on('click',function(event){
            event.stopPropagation();
        })
        //渲染城市键盘
        var cityData=[
            '京','津','冀','晋','辽','蒙','吉','黑',
            '沪','苏','浙','皖','闽','赣','鲁','豫',
            '鄂','湘','粤','桂','琼','渝','川','贵',
            '云','陕','甘','青','宁','新','藏','使',
        ]
        var html='';
        html="<ul id='keyboard_city'>";
        for(var i=0;i<cityData.length;i++){
            html=html+'<li>'+cityData[i]+'</li>';
        }
        html=html+'</ul>';
        $(".keyboard_box").append(html);
        //为城市键盘按钮绑定事件
        $('#keyboard_city').on('click','li',function(event){
            event.stopPropagation();
            $('#keyboard').append("<li>"+$(this).html()+"</li>");
            $('#keyboard_city').animate({
                bottom:"-10rem",
            },300,function(){
                $('#keyboard_num').animate({bottom:"0"})
            });
        });
        //渲染字母键盘
        $(".keyboard_box").append("<div id='keyboard_num'><ul>"+
                "<li>1</li>"+
                "<li>2</li>"+
                "<li>3</li>"+
                "<li>4</li>"+
                "<li>5</li>"+
                "<li>6</li>"+
                "<li>7</li>"+
                "<li>8</li>"+
                "<li>9</li>"+
                "<li>0</li>"+
                "</ul><ul>"+
                "<li>Q</li>"+
                "<li>W</li>"+
                "<li>E</li>"+
                "<li>R</li>"+
                "<li>T</li>"+
                "<li>Y</li>"+
                "<li>U</li>"+
                "<li class='io'>I</li>"+
                "<li class='io'>O</li>"+
                "<li>P</li>"+
                "</ul><ul>"+
                "<li>A</li>"+
                "<li>S</li>"+
                "<li>D</li>"+
                "<li>F</li>"+
                "<li>G</li>"+
                "<li>H</li>"+
                "<li>J</li>"+
                "<li>K</li>"+
                "<li>L</li>"+
                "</ul><ul>"+
                "<li>Z</li>"+
                "<li>X</li>"+
                "<li>C</li>"+
                "<li>V</li>"+
                "<li>B</li>"+
                "<li>N</li>"+
                "<li>M</li>"+
                "<li class='delete'></li>"+
                "</ul>"+
                "</div>");
        //最开始隐藏字母键盘上面的数字
        hideNumber();
        //字母键盘按钮绑定事件
        $('#keyboard_num li').not(".delete").bind('click',function(event){
            event.stopPropagation();
            var index=$("#keyboard").children("li").length;
            if(index<8){
                $('#keyboard').append("<li>"+$(this).html()+"</li>");
            }
            if(index == 1){
                $('.num_hide').removeClass('num_hide');
                $('.io').addClass('io_hide');
            }
        });
        //隐藏键盘中数字
        function hideNumber(){
            for(var i=0;i<10;i++){
                $('#keyboard_num li').eq(i).addClass('num_hide');
            }
        }
        //删除按钮
        $('.keyboard_box').on('click','.delete',function(event){
            event.stopPropagation();
            var index=$("#keyboard").children("li").length;
            if(index<=0){
                $(this).removeClass('clicked');
            }else{
                $('#keyboard').find('li').eq(index-1).remove();
                if(index < 4){
                    hideNumber();
                    $('.io').removeClass('io_hide');
                }
                if(index < 2){
                    $('#keyboard_num').animate({
                        bottom:"-10rem",
                    },300,function(){
                         $('#keyboard_city').animate({bottom: "0"},300,function(){
                        });
                    });
                }
            }

        })
    })